<template>
  <view class="quote-card">
    <text class="quote-text">{{text}}</text>
    <text class="quote-author">——{{author}}</text>
  </view>
</template>

<script>
export default {
  name: 'QuoteCard',
  props: {
    text: String,
    author: String
  }
}
</script>

<style lang="scss">
.quote-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 14px 16px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;

  &::before {
    content: '"';
    position: absolute;
    top: 6px;
    left: 10px;
    font-size: 42px;
    color: rgba(255, 255, 255, 0.15);
    font-family: Georgia, serif;
    line-height: 1;
  }

  .quote-text {
    font-size: 13px;
    color: #fff;
    line-height: 1.6;
    display: block;
    margin-bottom: 8px;
    padding-left: 6px;
    font-weight: 400;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
  }

  .quote-author {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 6px;
    text-align: right;
    display: block;
    font-style: italic;
    font-weight: 400;
  }
}
</style>